import React, { Children, createContext, ReactElement, useState } from 'react';
import { TabItemProps, TabsProps } from './interface';
import classNames from 'classnames';
import TabItem from './tabItem';

interface ITabsContext {
    index: string;
    onSelect?: (index: string) => void;
}

export const TabsContext = createContext<ITabsContext>({ index: '1' });

const Tabs: React.FC<TabsProps> = (props) => {

    const { defaultIndex = '1', mode, onSelect, className, style, children } = props;

    const [activeIndex, setAcitveIndex] = useState(defaultIndex);

    function handleSelect(index: string) {
        setAcitveIndex(index);
        if (onSelect) {
            onSelect(index);
        }
    }

    // 要传递给TabItem的属性
    const passedContext: ITabsContext = {
        index: activeIndex,
        onSelect: handleSelect,
    }

    const classes = classNames('kd-tabs-wrapper', className, {
        'kd-tabs-vertical': mode === 'vertical'
    });

    // 在children中只渲染TabItem组件
    // const renderChildren = () => {
    //     return Children.map(children, (child, index) => {
    //         if (React.isValidElement(child) && child.type === TabItem) {
    //             const tabItem = child as ReactElement<TabItemProps>;
    //             if (tabItem.props.index) {
    //                 return child;
    //             } else {
    //                 console.error('Warning: Tabs has a child which is not index');
    //             }

    //         } else {
    //             console.error('Warning: Tabs has a child which is not a TabItem component');
    //         }
    //     })
    // }

    const renderChildren = () => {
        return Children.map(children, (child, index) => {
            if (React.isValidElement(child) && child.type === TabItem) {
                const tabItem = child as ReactElement<TabItemProps>;
                if (tabItem.props.index) {
                    return child;
                } else {
                    console.error('Warning: Tabs has a child which is not index');
                }

            } else {
                console.error('Warning: Tabs has a child which is not a TabItem component');
            }
        })
    }

    const renderContentChildren = () => {
        let result = null;
        Children.forEach(children, (child, index) => {
            if (React.isValidElement(child) && child.type === TabItem) {
                const tabItem = child as ReactElement<TabItemProps>;
                if (tabItem.props.index === activeIndex) {
                    result = tabItem.props.children;
                }
            }
        })
        return result;
    }

    // return (
    //     <ul className={classes} style={style}>
    //         <TabsContext.Provider value={passedContext}>
    //             {renderChildren()}
    //         </TabsContext.Provider>
    //     </ul>
    // );

    return (
        <TabsContext.Provider value={passedContext}>
            <div className={classes}>
                <ul className='kd-tabs' style={style}>
                    {renderChildren()}
                </ul>
                <div className='kd-tab-content'>
                    {renderContentChildren()}
                </div>
            </div>
        </TabsContext.Provider>

    );
};

export default Tabs;